<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        body{
            background: #f5f6f7;
        }
        .container{
            background: white;
            margin: auto;
            width: 400px;
        }

        .sub_container{
            width: 90%;
            background: white;
            margin: auto;
        }

        .user .head{
            border-radius: 50%;
        }
        .user .userinfo{
            display: inline-block;
            margin-left: 10px;
            margin-top: 18px;
            vertical-align: top;
        }
        .userinfo img{
            width: 15px;
            vertical-align: middle;
            margin-left: 5px;
            margin-right: 5px;
        }

        .user .userinfo p{
            margin: 0px;
        }
        .userinfo .username{
            color: rgb(53, 53, 53);
        }

        .userinfo .age{
            color: rgb(141, 141, 141);
        }

        .userinfo p{
            color: rgb(58, 58, 58);
        }


        .info{
            margin: auto;
            margin-top: 20px;
        }

        .info-model{
            width: 18%;
            display: inline-block;
            text-align: center;
        }

        .info-model .number{
            vertical-align: top;
            line-height: 40px;
            color: rgb(41, 41, 41);
        }

        
        .info-model .info-name{
            color: rgb(41, 41, 41);
        }

        .info-model .number img{
            width: 30px;
            vertical-align: middle;
        }

        .info-model .blur{
            color: rgb(148, 148, 148);
        }

        .line{
            margin-top: 20px;
            width: 100%;
            height: 1px;
            background: rgba(139, 139, 139, 0.171);
        }

        .logo{
            margin-top: 30px;
            margin-left: 10px;
        }

        .logo img{
            width: 45px;
        }

        .buttons{
            margin: auto;
        }

        .button{
            border-radius: 20px;
            border: 1px rgba(116, 116, 116, 0.432) solid;
            display: inline-block;
            width: 40%;
            line-height: 35px;
            text-align: center;
            height: 35px;
            margin: 4%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sub_container">
            <div class="user">
                <img src="/images/head.gif" class="head">
                <div class="userinfo">
                    <p class="username">
                        axinawang
                    </p>
                    <p>
                        <span class="age">码龄10年 </span><img src="/images/nocErtification.png" alt=""> 暂无认证
                    </p>
                </div>
            </div>
            <div class="info">
                <div class="info-model">
                    <div class="number">138</div>
                    <div class="info-name">原创</div>
                </div>
                <div class="info-model">
                    <div class="number">1万+</div>
                    <div class="info-name">周排名</div>
                </div>
                <div class="info-model">
                    <div class="number">1万+</div>
                    <div class="info-name">原创</div>
                </div>
                <div class="info-model">
                    <div class="number">11万+</div>
                    <div class="info-name blur">原创</div>
                </div>
                <div class="info-model">
                    <div class="number"><img src="/images/blog5.png" alt=""></div>
                    <div class="info-name blur">等级</div>
                </div>
            </div>
            <div class="line"></div>
            <div class="info">
                <div class="info-model">
                    <div class="number">2478</div>
                    <div class="info-name blur">积分</div>
                </div>
                <div class="info-model">
                    <div class="number">24</div>
                    <div class="info-name blur">粉丝</div>
                </div>
                <div class="info-model">
                    <div class="number">19</div>
                    <div class="info-name blur">获赞</div>
                </div>
                <div class="info-model">
                    <div class="number">32</div>
                    <div class="info-name blur">评论</div>
                </div>
                <div class="info-model">
                    <div class="number">46</div>
                    <div class="info-name blur">收藏</div>
                </div>
            </div>
            <div class="logo">
                <img src="/images/chizhiyiheng@240.png" alt="">
                <img src="/images/qixiebiaobing4@240.png" alt="">
                <img src="/images/yuedu3@240.png" alt="">
            </div>
            <div class="buttons">
                <div class="button">
                    私信
                </div>
                <div class="button">
                    关注
                </div>
            </div>
        </div>
    </div>
</body>
</html>